import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {createAddPersonAction} from '../../redux/actions/person_action'
import {connect} from 'react-redux'
class Person extends Component {
    add =()=>{
      const name= this.name.value
      const age= this.age.value
      const personObj={id:nanoid(),name,age}
      //这里的方法对应Ui组件的key
      this.props.addPerson(personObj)
    }
    render() {
        return (
            <div>
                <h2>he:{this.props.he}</h2>
                <input type='text' placeholder='名字' ref={c=>this.name=c}/>
                <input type='text' placeholder='年龄' ref={c=>this.age=c}/>
                <button onClick={this.add}>tianjia</button>
                <ul>
                  {/* 这里的person是容器组件的可以    */}
                    {
                        this.props.personObj.map((person)=>{
                            return <li key={person.id}>{person.name}-{person.age}</li>
                           
                        })
                    }
                    
                </ul>
            </div>
        )
    }
}
export default connect(
    // state.person的person是store里的可以
    state=>({personObj:state.person,
        he:state.count}),
    //找Action
    {addPerson:createAddPersonAction}
)(Person)
